<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>车辆追踪 - 智驭安行系统</title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="./css/vehicle-tracking.css">
		<link rel="icon" href="./img/logo_nobackground.png" type="image/png">
		<!-- 添加高德地图 API -->
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=f877ddba0080f921415dfd6f89b979fe"></script>
	</head>
	<body>
		<div id="app">
			<!-- 页面头部 -->
			<header class="page-header">
				<div class="header-left">
					<h1>车辆追踪</h1>
					<el-breadcrumb separator="/">
						<el-breadcrumb-item>首页</el-breadcrumb-item>
						<el-breadcrumb-item>车辆管理</el-breadcrumb-item>
						<el-breadcrumb-item>车辆追踪</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="header-right">
					<el-button-group>
						<el-button type="primary" @click="refreshData">
							<i class="el-icon-refresh"></i> 刷新数据
						</el-button>
						<el-button type="success" @click="exportData">
							<i class="el-icon-download"></i> 导出数据
						</el-button>
					</el-button-group>
				</div>
			</header>

			<!-- 主要内容区 -->
			<div class="main-content">
				<!-- 左侧车辆列表 -->
				<div class="vehicle-list-panel">
					<div class="panel-header">
						<h3>车辆列表</h3>
						<el-input
							v-model="searchQuery"
							placeholder="搜索车牌号"
							prefix-icon="el-icon-search"
							clearable>
						</el-input>
					</div>
					<div class="vehicle-list">
						<div v-for="vehicle in filteredVehicles" 
							 :key="vehicle.id" 
							 class="vehicle-item"
							 :class="{ active: selectedVehicle?.id === vehicle.id }"
							 @click="selectVehicle(vehicle)">
							<div class="vehicle-info">
								<h4>{{ vehicle.plateNumber }}</h4>
								<el-tag size="small" :type="getStatusType(vehicle.status)">
									{{ vehicle.status }}
								</el-tag>
							</div>
							<div class="vehicle-details">
								<span><i class="el-icon-location"></i> {{ vehicle.location }}</span>
								<span><i class="el-icon-time"></i> {{ vehicle.lastUpdate }}</span>
							</div>
						</div>
					</div>
				</div>

				<!-- 右侧地图和详情 -->
				<div class="map-details-panel">
					<!-- 地图容器 -->
					<div class="map-container" id="mapContainer">
						<!-- 地图将通过JavaScript加载 -->
					</div>

					<!-- 车辆详情卡片 -->
					<div class="vehicle-details-card" v-if="selectedVehicle">
						<div class="card-header">
							<h3>{{ selectedVehicle.plateNumber }}</h3>
							<el-tag :type="getStatusType(selectedVehicle.status)">
								{{ selectedVehicle.status }}
							</el-tag>
						</div>
						<el-descriptions :column="1" border>
							<el-descriptions-item label="当前位置">
								{{ selectedVehicle.location }}
							</el-descriptions-item>
							<el-descriptions-item label="最后更新">
								{{ selectedVehicle.lastUpdate }}
							</el-descriptions-item>
							<el-descriptions-item label="当前速度">
								{{ selectedVehicle.speed }} km/h
							</el-descriptions-item>
							<el-descriptions-item label="当前驾驶员">
								{{ selectedVehicle.driver }}
							</el-descriptions-item>
						</el-descriptions>
						
						<!-- 运行轨迹 -->
						<div class="tracking-history">
							<h4>运行轨迹</h4>
							<el-timeline>
								<el-timeline-item
									v-for="(track, index) in selectedVehicle.trackingHistory"
									:key="index"
									:timestamp="track.time"
									:type="track.type">
									{{ track.location }}
								</el-timeline-item>
							</el-timeline>
						</div>
					</div>
				</div>
			</div>

			<!-- 实时监控设置对话框 -->
			<el-dialog title="监控设置" :visible.sync="settingsVisible" width="500px">
				<el-form :model="monitorSettings" label-width="120px">
					<el-form-item label="刷新间隔">
						<el-select v-model="monitorSettings.refreshInterval">
							<el-option label="5秒" value="5"></el-option>
							<el-option label="10秒" value="10"></el-option>
							<el-option label="30秒" value="30"></el-option>
							<el-option label="1分钟" value="60"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="显示轨迹">
						<el-switch v-model="monitorSettings.showTrack"></el-switch>
					</el-form-item>
					<el-form-item label="轨迹时长">
						<el-select v-model="monitorSettings.trackDuration" :disabled="!monitorSettings.showTrack">
							<el-option label="最近1小时" value="1"></el-option>
							<el-option label="最近3小时" value="3"></el-option>
							<el-option label="最近6小时" value="6"></el-option>
							<el-option label="最近12小时" value="12"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="settingsVisible = false">取消</el-button>
					<el-button type="primary" @click="saveSettings">确定</el-button>
				</span>
			</el-dialog>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						// 搜索查询
						searchQuery: '',

						// 选中的车辆
						selectedVehicle: null,

						// 车辆列表数据
						vehicles: [
							{
								id: 1,
								plateNumber: '渝AW2475',
								status: '在线',
								location: '重庆市渝中区解放碑',
								lastUpdate: '2025-05-12 15:25:17',
								speed: 45,
								driver: '张师傅',
								trackingHistory: [
									{
										time: '10:30:00',
										location: '重庆市渝中区解放碑',
										type: 'success'
									},
									{
										time: '10:25:00',
										location: '重庆市渝中区较场口',
										type: 'info'
									}
								]
							},
							{
								id: 2,
								plateNumber: '渝BW7785',
								status: '离线',
								location: '重庆市江北区观音桥',
								lastUpdate: '2024-03-15 09:15:00',
								speed: 0,
								driver: '李四',
								trackingHistory: [
									{
										time: '09:15:00',
										location: '重庆市江北区观音桥',
										type: 'warning'
									}
								]
							}
						],

						// 监控设置
						settingsVisible: false,
						monitorSettings: {
							refreshInterval: '10',
							showTrack: true,
							trackDuration: '1'
						},

						// 用户自己的定位点
						userLocationMarker: null
					}
				},
				computed: {
					// 过滤后的车辆列表
					filteredVehicles() {
						if (!this.searchQuery) return this.vehicles;
						return this.vehicles.filter(vehicle => 
							vehicle.plateNumber.toLowerCase().includes(this.searchQuery.toLowerCase())
						);
					}
				},
				methods: {
					// 获取状态类型
					getStatusType(status) {
						const typeMap = {
							'在线': 'success',
							'离线': 'info',
							'维修中': 'warning'
						};
						return typeMap[status] || 'info';
					},

					// 选择车辆
					selectVehicle(vehicle) {
						this.selectedVehicle = vehicle;
						if (vehicle.position) {
							this.map.setCenter(vehicle.position);
							this.map.setZoom(15);
						}
					},

					// 刷新数据
					refreshData() {
						this.$message.success('数据已刷新');
						// TODO: 实现数据刷新逻辑
					},

					// 导出数据
					exportData() {
						this.$message.success('数据导出中...');
						// TODO: 实现数据导出逻辑
					},

					// 保存设置
					saveSettings() {
						this.$message.success('设置已保存');
						this.settingsVisible = false;
						// 更新刷新间隔
						clearInterval(this.refreshInterval);
						this.startAutoRefresh();
					},

					// 初始化地图
					initMap() {
						// 先初始化地图，默认重庆
						this.map = new AMap.Map('mapContainer', {
							zoom: 11,
							center: [106.551556, 29.563009], // 默认重庆
							viewMode: '3D'
						});

						// 添加地图控件
						this.map.addControl(new AMap.Scale());
						this.map.addControl(new AMap.ToolBar());
						this.map.addControl(new AMap.MapType());

						// 调用高德IP定位接口
						fetch('https://restapi.amap.com/v3/ip?key=f877ddba0080f921415dfd6f89b979fe')
							.then(res => res.json())
							.then(data => {
								console.log('IP定位返回：', data); // 调试用
								if (data.status === '1' && data.rectangle) {
									const [leftBottom, rightTop] = data.rectangle.split(';');
									const [lng1, lat1] = leftBottom.split(',').map(Number);
									const [lng2, lat2] = rightTop.split(',').map(Number);
									const centerLng = (lng1 + lng2) / 2;
									const centerLat = (lat1 + lat2) / 2;
									this.map.setCenter([centerLng, centerLat]);
									this.map.setZoom(15); // 强制放大

									// 标注用户自己的定位点
									if (!this.userLocationMarker) {
										this.userLocationMarker = new AMap.Marker({
											position: [centerLng, centerLat],
											icon: new AMap.Icon({
												size: new AMap.Size(36, 36),
												image: 'https://webapi.amap.com/theme/v1.3/markers/n/loc.png',
												imageSize: new AMap.Size(36, 36)
											}),
											title: '我的位置',
											offset: new AMap.Pixel(-18, -36)
										});
										this.map.add(this.userLocationMarker);
									} else {
										this.userLocationMarker.setPosition([centerLng, centerLat]);
									}
									console.log('已添加定位点', centerLng, centerLat);
								} else {
									this.$message.warning('定位失败，已使用默认城市');
								}
							})
							.catch(() => {
								this.$message.warning('定位失败，已使用默认城市');
							});
					},

					// 更新车辆位置
					updateVehiclePosition(vehicle) {
						if (!vehicle.marker) {
							// 创建车辆标记
							vehicle.marker = new AMap.Marker({
								position: vehicle.position,
								icon: new AMap.Icon({
									size: new AMap.Size(32, 32),
									image: './img/car-icon.png',
									imageSize: new AMap.Size(32, 32)
								}),
								angle: vehicle.angle || 0,
								offset: new AMap.Pixel(-16, -16)
							});
							this.map.add(vehicle.marker);
						} else {
							// 更新现有标记位置
							vehicle.marker.setPosition(vehicle.position);
							vehicle.marker.setAngle(vehicle.angle || 0);
						}

						// 如果显示轨迹
						if (this.monitorSettings.showTrack) {
							if (!vehicle.polyline) {
								vehicle.polyline = new AMap.Polyline({
									path: [vehicle.position],
									strokeColor: '#667eea',
									strokeWeight: 4,
									strokeOpacity: 0.8
								});
								this.map.add(vehicle.polyline);
							} else {
								const path = vehicle.polyline.getPath();
								path.push(vehicle.position);
								vehicle.polyline.setPath(path);
							}
						}
					},

					// 开始自动刷新
					startAutoRefresh() {
						this.refreshInterval = setInterval(() => {
							this.refreshVehiclePositions();
						}, this.monitorSettings.refreshInterval * 1000);
					},

					// 刷新车辆位置
					refreshVehiclePositions() {
						// 模拟获取实时位置数据
						this.vehicles.forEach(vehicle => {
							// 这里应该替换为实际的API调用
							const randomOffset = () => (Math.random() - 0.5) * 0.01;
							vehicle.position = [
								106.551556 + randomOffset(),
								29.563009 + randomOffset()
							];
							vehicle.angle = Math.random() * 360;
							this.updateVehiclePosition(vehicle);
						});
					}
				},
				mounted() {
					// 初始化地图
					this.initMap();
					// 启动定时刷新
					this.startAutoRefresh();
				}
			});
		</script>
	</body>
</html>